<template>
	<view>
		<view class="cell">
			<view class="cell-title">房号</view>
			<hg-select  :searchable="false" :items="bindeds" v-model="room" class="cell-content"></hg-select>
		</view>
		
		<view class="waterCard" style="background-image: url(https://images-1256063599.cos.ap-shanghai.myqcloud.com/sbz/bg.png);">
			<view style="padding-left: 44rpx;margin-top: 50rpx;font-size: 28rpx;">
				<text style="margin-right: 23rpx;">户名</text>
				<text>{{get.waterCard.roomMaster}}</text>
			</view>
			<view style="padding-left: 44rpx;margin-top: 30rpx;font-size: 28rpx;">
				<text style="margin-right: 23rpx;">地址</text>
				<text style="line-height: 21rpx;">{{get.waterCard.address.roomAddress}}</text>
			</view>
			<hg-hr text=" " :shadow="false"></hg-hr>
			<view class="vertical" style="margin-top: 27rpx;">
				<view class="circle" style="width: 168rpx;height: 168rpx;border-color: white;font-size: 32rpx;">
					<text v-if="get.unPayTotalPrice>0">{{get.unPayTotalPrice}}元</text>
					<text v-else>暂无欠费</text>
				</view>
				<view v-if="get.unPayTotalPrice>0">未缴费总额</view>
			</view>
			<image v-if="get.waterCard.type==1" src="../../static/images/index/personel.png" mode="widthFix" class="type"></image>
			<image v-else-if="get.waterCard.type==2" src="../../static/images/index/company.png" mode="widthFix" class="type"></image>
		</view>
		<!-- 		<wyb-table @onCellClick='goDetail' ref="table" :headers="headers" :contents="contents" width="750rpx" height="400rpx" 
		:sort-col="sortCol" :sort-ways="sortWays" :formatCol="formatCols"/> -->
		<view class="title">历史账单</view>
		<block v-if="get.orderList.total>0">
			<navigator :url="`../detail/detail?id=${order.id}`" v-for="(order, idx) in get.orderList.list" :key="idx">
				<view class="litem">
					<view class="horizontal">
						<view class="date">{{order.readTime | smartTime('YY/mm/dd')}}</view>
						<view class="status" :style="{backgroundColor: ['#DD524D', '#0DB07C'][order.status]}">{{['未缴', '已缴',][order.status]}}</view>
					</view>
					<view class="gst">本次读数：{{order.currentNum}}</view>
					<view class="horizontal">
						<view class="gst">用水量：{{order.waterNum}}L</view>
						<view class="gst">应缴金额：<text style="font-size: large;color: red;font-weight: bold;">￥{{order.price}}</text></view>
					</view>
				</view>
			</navigator>
		</block>
		<view class="vertical" style="margin-top: 220rpx;" v-else-if="loaded">
			<image src="../../static/icons/empty.png" mode="widthFix" class="no-records-icon"></image>
			<view class="gst">暂时没有用水记录~~</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="bottom horizontal" v-if="get.unPayTotalPrice>0">
			<button class="capsule scale" style="background-color: #2E62E2;color: white;" @tap="pay">立即支付</button>
		</view>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import hgHr from '@/components/hg-hr/hg-hr.vue'
	import card from '@/mixins/card.js'

	const app = getApp()

	export default {
		components: {
			hgCell,
			wybTable,
			xflSelect,
			hgHr,
		},
		mixins:[card,],
		data() {
			return {
				post: {
					// 房号
					roomId: '',
				},
				loaded:false,
				// get信息
				get: {
					unPayTotalPrice: 0,
					// 历史账单
					orderList: [],
					// 房号信息
					waterCard: {
						roomId: 1, // 房号ID
						waterCardNo: "", // 卡号
						roomMaster: "", //户主姓名
						address: { // 房号地址
							streetAddress: "", //
							roomAddress: "" // 房号地址
						},
						type: 1 // 类型 1：个人 2：单位
					}
				},
			}
		},
		watch:{
			room(newRoom, oldRoom){
				if(newRoom==-1) return;
				this.loaded=false
				uni.showLoading({
					title:'加载中...'
				})
				// 获取我的用水
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'waterInfo',
					method: 'GET',
					data: {
						cardNo: this.get.rooms[newRoom].cardNo,
					},
					success: res => {
						const {
							data
						} = res
						uni.hideLoading()
						this.loaded=true
						if (data.code == 200) {
							console.log(data)
							Object.assign(this.get, data.data)
							this.post.roomId = this.get.waterCard.roomId
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {
						console.error(err)
					},
				})
			}
		},
		onLoad(opts) {
			uni.showLoading({
				title: '加载中...',
				mask: false
			});
			
			// 获取默房号我的用水
			uni.request({
				header: {
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url: app.globalData.url + 'waterInfo',
				method: 'GET',
				success: res => {
					this.loaded=true
					uni.hideLoading()
					const {
						data
					} = res
					if (data.code == 200) {
						console.log(data)
						Object.assign(this.get, data.data)
					} else if (data.code == 500) {
						uni.showToast({
							icon: 'none',
							title: data.message,
						})
					}
				},
				fail: (err) => {
					console.error(err)
				},
			});
		},
		methods: {
			pay(){
				uni.showModal({
					cancelText:'取消',
					confirmText:'缴费',
					content:`您正在为"${this.get.waterCard.address.roomAddress}"进行缴费，总金额：${this.get.unPayTotalPrice.toFixed(2)}元`,
					title:'缴费提醒',
					success: (res) => {
						if(res.confirm){
							uni.request({
								header:{
									Authorization: 'Bearer ' + app.globalData.token,
								},
								url: app.globalData.curl + 'order/pay',
								method: 'POST',
								data: {
									orderId: this.detail.id,
								},
								success: res => {
									const {data} = res
									console.log(data)
									if(res.code==200){
										uni.requestPayment({
											orderInfo: '',
											success: res => {},
											fail: () => {},
											complete: () => {}
										});
									}else if(data.code==500){
										uni.showToast({
											icon:'none',
											title: data.message,
										});
									}
								},
								fail: (err) => {console.error(err)},
							});
						}
					}
				});
			},
			goDetail(e) {
				console.log(e)
				const month = e.lineData.date
				uni.navigateTo({
					url: `../detail/detail?month=${month}`,
				})
			},
		}
	}
</script>

<style scoped>
	.status{
		border-radius: 999em;
		font-size: small;
		padding: 5rpx 20rpx;
		color: white;
	}
	
	.date{
		font-size: 34rpx;
		font-family: Alibaba PuHuiTi;
		color: #333333;
		font-weight: bold;
	}
	
	.waterCard{
		background-size: 100% 100%;
		margin-bottom: 48rpx;
		height: 410rpx;
		color: white;
		position: relative;
	}
	
	.type{
		width: 128rpx;
		height: 64rpx;
		position: absolute;
		right: 0;
		top: 32rpx;
	}
	
	.waterCard {
		color: white;
		border-color: white;
	}

	#money {
		font-weight: bold;
		font-size: large;
	}

	.circle {
		border-radius: 50% 50%;
		border: solid 1px black;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;

	}
</style>
